import { ScatterSeriesOption, CustomSeriesRenderItemAPI } from "echarts";
import ChartsBaseConfig from "../config/chartsBaseConfig";

const getBarb = (speed: number | string) => {
  let code: number = 0;

  const _speed = Number(speed);
  if (_speed < 0 || _speed >= 97) return "";
  if (_speed < 0) code == 0x7f;
  else {
    code = Math.floor((_speed + 1) / 2) + 47;
    if (_speed >= 79) code--;
  }
  return eval('"\\u00' + code.toString(16) + '"');
};

const DrawWinds = (_: any, api: CustomSeriesRenderItemAPI) => {
  const {
    WindConfig: { WindFontSize, WindDefaultFontColor, WindFontFamily, z },
  } = ChartsBaseConfig;

  const point = api.coord([api.value(0), api.value(1)]);

  let dir = 0;
  let angle = 360 - (90 - Number(api.value(3)) + 180);
  angle < 0 && (angle += 360);

  if (api.value(3) != undefined && api.value(3) != "NaN") {
    dir = angle * 0.0175; //0.0175 旋转度数 * 0.0175 比例
  }

  return {
    type: "text",
    style: {
      text: getBarb(api.value(2)),
      // fontSize: 24,
      // font: "2em barb",
      font: `${WindFontSize}px ${WindFontFamily}`,
      color: WindDefaultFontColor,
    },
    z2: z,
    origin: [0, WindFontSize / 2],
    rotation: dir,
    position: [point[0], point[1] - WindFontSize / 2],
  };
};

const WindRenders = (opt: ScatterSeriesOption) => {
  return {
    type: "custom",
    name: "WIND",
    renderItem: DrawWinds,
    encode: {
      x: 0,
      y: 1,
    },
    xAxisIndex: opt.xAxisIndex,
    yAxisIndex: opt.yAxisIndex,
    data: opt.data,
  };
};

export default WindRenders;
